import QtQuick
//import QtQuick.Window

Rectangle {
    width: 300
    height: 480

    gradient: Gradient { // 渐变色
        GradientStop { position: 0.0; color: "#4a4a4a" }
        GradientStop { position: 1.0; color: "#2b2b2b" }
    }

    // View
    ListView {
        id: listView

        anchors.fill: parent

        delegate: detailsDelegate
        model: planets
    }

    // Model
    ListModel {
        id: planets

        ListElement {
            name: "Mercury"
            imageSource: "images/mercury.png"
            facts: "Mercury is the smallest planet in the Solar Sy..."
        }
        ListElement {
            name: "Venus"
            imageSource: "images/venus.png"
            facts: "Venus is the second planet from the Sun. It is a t..."
        }
        ListElement {
            name: "Earth"
            imageSource: "images/earth.png"
            facts: "The earth is the third plannet from the Sun. It is..."
        }
        ListElement {
            name: "Mars"
            imageSource: "images/mars.png"
            facts: "Mars is the fourth plannet from the Sun in the Solar..."
        }
    }

    // Delegate
    Component {
        id: detailsDelegate

        Item {
            id: wrapper

            required property string name
            required property string imageSource
            required property string facts

            width: listView.width
            height: 30

            // text
            Rectangle {
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: parent.top
                height: 30

                color: '#333'
                border.color: Qt.lighter(color, 1.2)
                Text {
                    anchors.left: parent.left
                    anchors.leftMargin: 4
                    anchors.verticalCenter: parent.verticalCenter

                    font.pixelSize: parent.height - 4
                    color: '#fff'
                    text: wrapper.name
                }
            }

            // image
            Rectangle {
                id: image
                width: 26; height: 26
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.topMargin: 2
                anchors.rightMargin: 2
                color: 'black'

                Image {
                    anchors.fill: parent
                    fillMode: Image.PreserveAspectFit
                    source: wrapper.imageSource
                }
            }

            MouseArea {
                anchors.fill: parent
                onClicked: parent.state = 'expanded'
            }

            Rectangle {// close button
                id: closeButton
                width: 26; height: 26
                anchors.top: parent.top
                anchors.right: parent.right
                anchors.topMargin: 2
                anchors.rightMargin: 2
                color: 'lightblue'
                border.color: Qt.lighter(color, 1.1)

                opacity: 0
                Text {
                    anchors.centerIn: parent
                    text: '\u25C0'
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: wrapper.state = ''
                }
            }

            Item { // factsView 放描述性文字
                id: factsView

                anchors.top: image.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.bottom: parent.bottom

                opacity: 0

                Rectangle {
                    anchors.fill: parent
                    color: 'black'

                    gradient: Gradient { // 渐变色
                        GradientStop { position: 0.0; color: "#fed958" }
                        GradientStop { position: 1.0; color: "#fecc2f" }
                    }
                    border.color: '#000000'
                    border.width: 2

                    Text {
                        wrapMode: Text.WordWrap
                        anchors.margins: 5

                        color: '#1f1f21'
                        anchors.fill: parent
                        font.pixelSize: 12
                        text: wrapper.facts
                    }
                }
            }

            states: [
                State {
                    name: 'expanded'

                    PropertyChanges {
                        target: wrapper
                        height: listView.height
                    }
                    PropertyChanges {
                        target: image
                        height: listView.width
                        width: listView.width
                        anchors.topMargin: 30
                        anchors.rightMargin: 0
                    }
                    PropertyChanges {
                        target: wrapper.ListView.view
                        contentY: wrapper.y
                        interactive: false // 不允许滑动
                    }
                    PropertyChanges {
                        target: closeButton
                        opacity: 1
                    }
                    PropertyChanges {
                        target: factsView
                        opacity: 1
                    }
                }

            ]

            transitions: [
            Transition {
                NumberAnimation {
                    property: "name"
                    duration: 200
                    properties: "height,width,anchors.rightMargin,anchors.topMargin,opacity,contentY"
                    easing.type: Easing.InOutQuad
                }
            }
            ]
        }
    }
}
